import React, { useState } from 'react';
import { Table, Pagination, Button } from 'antd';

function CurriculumList({
  curriculums,
  updateCurriculum,
  deleCurriculum
}) {
  
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      render: (text, record, index) => {
        return text;
      },
    },
    {
      align: 'center',
      title: '学期',
      dataIndex: 'fd_semester',
      render: (text, record, index) => {
        if (text === 1) return "大一上"
        if (text === 2) return "大一下"
        if (text === 3) return "大二上"
        if (text === 4) return "大二下"
        if (text === 5) return "大三上"
        if (text === 6) return "大三下"
        if (text === 7) return "大四上"
        if (text === 8) return "大四下"
      },
    },
    {
      title: '班级',
      align: 'center',
      dataIndex: 'fd_claName',
    },
    {
      align: 'center',
      title: '课程',
      dataIndex: 'fd_curriculumName',
    },
    {
      align: 'center',
      title: '课程编号',
      dataIndex: 'fd_curriculumNum',
    },
    {
      align: 'center',
      title: '专业',
      dataIndex: 'fd_professionalName',
    },
    // {
    //   align: 'center',
    //   title: '学分',
    //   dataIndex: 'fd_credit',
    // },
    // {
    //   title: '学时',
    //   align: 'center',
    //   dataIndex: 'fd_creditHours',
    // },
    // {
    //   title: '类别',
    //   dataIndex: 'fd_type',
    //   key: 'fd_type',
    //   width: 120,
    //   align: 'center',
    //   render: (text, record, index) => {
    //     if(text === 1) return "必修"
    //     if(text === 2) return "选修"
    //   },
    // },
    {
      align: 'center',
      title: '任课老师',
      dataIndex: 'fd_name',
    },
    {
      align: 'center',
      title: '备注',
      dataIndex: 'fd_remarks',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align:'center',
      width:124,
      render: (_, record) => {
        return (
          <>
            <Button onClick={() => updateCurriculum(record)} size='small'  >详情</Button>
            <Button onClick={() => deleCurriculum(record)} size='small'  >删除</Button>
          </>
        )
      }
    }
  ];





  const [page, setPage] = useState(1);
  const pageSize = 11;
  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  const paginatedData = curriculums?.slice(start, end).map((item, index) => {
    return { ...item, index: index + 1 + start }
  })

  const onPageChange = (page, pageSize) => {
    setPage(page);
  };

  return (
    <>
      <Table
        bordered
        columns={columns}
        dataSource={paginatedData}
        pagination={false}
        size="small"
        rowKey={"index"}
        scroll={{ x: 'max-content' }}
        style={{ fontSize: "12px" }}
      />
      <Pagination
        size='small'
        current={page}
        pageSize={pageSize}
        total={curriculums?.length}
        onChange={onPageChange}
        showSizeChanger={false}
        style={{ marginTop: '16px', textAlign: "right" }}
      />
    </>
  );
}

export default CurriculumList;
